<template>
	<div>
<el-card>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item ><a href="https://element.eleme.io" >首页</a></el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/register'}">用户注册</el-breadcrumb-item>
    <el-breadcrumb-item>忘记密码</el-breadcrumb-item>
  </el-breadcrumb><br />

  <el-alert title="忘记密码" type="info" effect="dark" center show-icon :closable="false"></el-alert><br />
	<el-steps :active="active" finish-status="success">
	  <el-step title="身份验证" icon="el-icon-s-custom "></el-step>
	  <el-step title="重置密码" icon=" el-icon-mobile"></el-step>
	  <el-step title="完成" icon="el-icon-success"></el-step>
	</el-steps>

  <el-form :model="updPassword" :rules="rules" ref="updPhoneRef" label-width="100px"
        label-position="top" >
   <el-tabs v-model="activeIndex" :tab-position="bottom"  >

    <el-tab-pane label="身份验证" name="0">
    <el-form-item label="手机号" prop="phone">
      <el-col span="8">
      <el-input v-model="updPassword.phone" placeholder="手机号"></el-input>
      </el-col>
    </el-form-item>
    <el-form-item label="验证码" prop="code">
      <el-col span="8">
      <el-input v-model="updPassword.code" placeholder="验证码" ></el-input><br />
      <el-button :disabled="disabled" @click="sendcode" class="sendcode"
      style="margin-top: 10px;" type="primary">{{btntxt}}</el-button>
      <el-button style="margin-top: 12px;" @click="next" >下一步</el-button>
      </el-col>
    </el-form-item>
    </el-tab-pane>

    <el-tab-pane label="重置密码" name="1">
        <el-form-item label="新密码" prop="password">
          <el-col span="8">
          <el-input v-model="updPassword.password" placeholder="新密码" type="password" show-password></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="确认新密码" prop="password2">
          <el-col span="8">
          <el-input v-model="updPassword.password2" placeholder="确认新密码" type="password" show-password></el-input>
          <el-button style="margin-top: 12px;" @click="next2">下一步</el-button>
          </el-col>
        </el-form-item>
    </el-tab-pane>

    <el-tab-pane label="处理结果" name="2">
        <el-col :sm="12" :lg="6">
          <div class="block">
            <img :src="imgUrl" style="width：300px;height:300px;padding-left:725px;">
          <el-button type="primary" style="margin-left:880px" @click="returnLogin">返回登录</el-button>
          </div>                                  
        </el-col>
    </el-tab-pane>

    </el-tabs>
  </el-form>
</el-card>
</div>
</template>

<script>
	 export default {

	    data() {
        //校验手机号的邮箱规则
        const checkPhone = (rule, value, callback) => {

          //定义校验手机号的正则语法
        const phoneRege = /^1[34578][0-9]{9}$/
        if (phoneRege.test(value)) {

          return callback()
        }
        callback(new Error('请填写正确的手机号'))

        }

        const checkCode = (rule, value, callback) => {

          //定义校验手机号的正则语法
        const Code = /^[0-9]{6}$/
        if (Code.test(value)) {

          return callback()
        }
        callback(new Error('请填写正确的验证码'))

        }

        const checkPassword = (rule, value, callback) => {
          if(this.updPassword.password !== this.updPassword.password2) return callback(new Error('2次密码输入不一致'))
          //否则校验成功
          callback()
        }

	      return {
          disabled:false,
           time:60,
           btntxt:"发送验证码",
          activeIndex: '0',
          active:0,
          imgUrl:require("../images/2.png"),

          updPassword:{
            phone:"",
            code:"",
            password:"",
            password2:""
          },
          rules: {
              phone: [
                { required: true, message: '请输入手机号', trigger: 'blur' },
                { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' },
                { validator: checkPhone , trigger: 'blur' }
              ],
              code: [
                { required: true, message: '请输入验证码', trigger: 'blur' },
                { min: 6, max: 6, message: '长度为6个字符', trigger: 'blur' },
                { validator: checkCode , trigger: 'blur' }
              ],
              password: [
                      { required: true, message: '请输入密码', trigger: 'blur' },
                      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                    ],
              password2: [
                      { required: true, message: '请输入密码', trigger: 'blur' },
                      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
                      { validator: checkPassword , trigger: 'blur' }
                    ]
          },

	      }
     },
	    methods: {
        next() {
          if(this.updPassword.phone.length!==11||this.updPassword.code.length!=6){
            alert("请正确输入手机号或验证码")
            return
          }
          this.queryPhone();
          
        },

	      next2() {
          this.$refs.updPhoneRef.validate(async valid => {
            let userPassword = {}
          userPassword.phone = this.updPassword.phone
          userPassword.code = this.updPassword.code
          userPassword.password = this.updPassword.password
          userPassword.password2 = this.updPassword.password2

            //如果校验失败 则停止数据
            if(!valid) return
          this.resetPassword(userPassword);
	        this.active=this.active+2;
          this.activeIndex='2';
          })
	      },
        sendcode(){
         this.time=60;
         this.codeMsg();     
         },

         //发送手机验证码倒计时
        codeMsg(){
         if(this.updPassword.phone.length!==11){
             alert("请输入正确的手机号")
             return
           }
         if (this.time > 0) {
          this.disabled=true;
          this.time--;
          this.btntxt=this.time+"秒后重新发送";
          setTimeout(this.codeMsg, 1000);
         } else{
          this.time=0;
          this.btntxt="发送验证码";
          this.disabled=false;
         }
         },

        async queryPhone() {
          const {data: result} =  await this.$http.post('/forgetPassword/queryPhone',this.updPassword)
          if(result.status !== 200){
            return this.$message.error("该手机号未注册")
          } 
          this.active++;
          this.activeIndex='1';
         },

        async resetPassword(userPassword){
          const{data:result}=await this.$http.put("/forgetPasswoed/resetPassword",userPassword)
          if(result.status !==200){
            return this.$message.error("密码重置失败")
          }
          this.$message.success("密码重置成功")
          userPassword={}
        },

        returnLogin(){
          this.$router.push("/login")
        }

	    }
	  }
</script>


<style lang="less" scoped>
      
</style>
